<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link href="../css/mui.imageviewer.css" rel="stylesheet" />
		<link href="../css/imgenlarge.css"  rel="stylesheet" />
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			.footer-left {
				position: absolute;
				width: 50px;
				height: 50px;
				left: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
				padding: 12px 4px;
			}
			.footer-right {
				position: absolute;
				width: 50px;
				height: 91.5px;
				right: 0px;
				bottom: 0px;
				text-align: center;
				display: inline-block;
				line-height: 36px;
				font-size: 14px;
			}
			.footer-center {
				height: 34.5px;
				padding: 5px 0px;
			}
			.footer-center [class*=input] {
				width: 100%;
				height: 100%;
				border-radius:35px;
			}
			.footer-center .input-text {
				background: #fff;
				border: solid 1px #ddd;
				padding: 15px !important;
				font-size: 16px !important;
				line-height: 18px !important;
				font-family: verdana !important;
				overflow: hidden;
			}
			.footer-center .input-sound {
				background-color: #eee;
			}
			.mui-content {
				height: 100%;
				padding: 44px 0px 50px 0px;
				overflow: auto;
				background-color: #F8F8F8;
				box-sizing: border-box;
			}
			#msg-list {
				height: 100%;
				overflow: auto;
				height: 100%;
				padding-bottom: 60px;
				box-sizing: border-box;
				-webkit-overflow-scrolling: touch;
			}
			.msg-item {
				padding: 8px;
				clear: both;
			}
			.msg-item .mui-item-clear {
				clear: both;
			}
			.msg-item .msg-user {
				width: 38px;
				height: 38px;
				border: solid 1px #d3d3d3;
				display: inline-block;
				background: #fff;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: left;
				padding: 3px;
				color: #ddd;
			}
			.msg-item .msg-user-img{
				width: 38px;
				height: 38px;
				display: inline-block;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: left;
				color: #ddd;
			}
			
			.msg-item .msg-content {
				display: inline-block;
				border-radius: 5px;
				border: solid 1px #d3d3d3;
				background-color: #FFFFFF;
				color: #333;
				padding: 8px;
				vertical-align: top;
				font-size: 15px;
				position: relative;
				margin: 0px 8px;
				max-width: 75%;
				min-width: 35px;
				float: left;
			}
			.msg-item .msg-content .msg-content-inner {
				overflow-x: hidden;
			}
			.msg-item .msg-content .msg-content-arrow {
				position: absolute;
				border: solid 1px #d3d3d3;
				border-right: none;
				border-top: none;
				background-color: #FFFFFF;
				width: 10px;
				height: 10px;
				left: -5px;
				top: 12px;
				-webkit-transform: rotateZ(45deg);
				transform: rotateZ(45deg);
			}
			.msg-item-self .msg-user,
			.msg-item-self .msg-content {
				float: right;
			}
			.msg-item-self .msg-content .msg-content-arrow {
				left: auto;
				right: -5px;
				-webkit-transform: rotateZ(225deg);
				transform: rotateZ(225deg);
			}
			.msg-item-self .msg-content,
			.msg-item-self .msg-content .msg-content-arrow {
				background-color: #4CD964;
				color: #fff;
				border-color: #2AC845;
			}
			footer .mui-icon {
				color: #000;
			}
			footer .mui-icon:active {
				color: #007AFF !important;
			}
			footer .mui-icon-paperplane:before {
				content: "发送";
			}
			footer .mui-icon-paperplane {
				/*-webkit-transform: rotateZ(45deg);
				transform: rotateZ(45deg);*/
				
				font-size: 16px;
				word-break: keep-all;
				line-height: 100%;
				padding-top: 6px;
				color: rgba(0, 135, 250, 1);
			}
			#msg-sound {
				-webkit-user-select: none !important;
				user-select: none !important;
			}
			.rprogress {
				position: absolute;
				left: 50%;
				top: 50%;
				width: 140px;
				height: 140px;
				margin-left: -70px;
				margin-top: -70px;
				background-image: url(../images/arecord.png);
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 30px 30px;
				background-color: rgba(0, 0, 0, 0.7);
				border-radius: 5px;
				display: none;
				-webkit-transition: .15s;
			}
			.rschedule {
				background-color: rgba(0, 0, 0, 0);
				border: 5px solid rgba(0, 183, 229, 0.9);
				opacity: .9;
				border-left: 5px solid rgba(0, 0, 0, 0);
				border-right: 5px solid rgba(0, 0, 0, 0);
				border-radius: 50px;
				box-shadow: 0 0 15px #2187e7;
				width: 46px;
				height: 46px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -23px;
				margin-top: -23px;
				-webkit-animation: spin 1s infinite linear;
				animation: spin 1s infinite linear;
			}
			.r-sigh{
				display: none;
				border-radius: 50px;
				box-shadow: 0 0 15px #2187e7;
				width: 46px;
				height: 46px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -23px;
				margin-top: -23px;
				text-align: center;
				line-height: 46px;
				font-size: 40px;
				font-weight: bold;
				color: #2187e7;
			}
			.rprogress-sigh{
				background-image: none !important;
			}
			.rprogress-sigh .rschedule{
				display: none !important;
			}
			.rprogress-sigh .r-sigh{
				display: block !important;
			}
			.rsalert {
				font-size: 12px;
				color: #bbb;
				text-align: center;
				position: absolute;
				border-radius: 5px;
				width: 130px;
				margin: 5px 5px;
				padding: 5px;
				left: 0px;
				bottom: 0px;
			}
			@-webkit-keyframes spin {
				0% {
					-webkit-transform: rotate(0deg);
				}
				100% {
					-webkit-transform: rotate(360deg);
				}
			}
			@keyframes spin {
				0% {
					transform: rotate(0deg);
				}
				100% {
					transform: rotate(360deg);
				}
			}
			#h {
				background: #fff;
				border: solid 1px #ddd;
				padding: 10px !important;
				font-size: 16px !important;
				font-family: verdana !important;
				line-height: 18px !important;
				overflow: visible;
				position: absolute;
				left: -1000px;
				right: 0px;
				word-break: break-all;
				word-wrap: break-word;
			}
			.cancel {
				background-color: darkred;
			}
			.mui-bar>div:nth-child(2){
				position: relative;
				float: left;
				width:calc(100% -  44px);
				height: 100%;
				text-align: center;
				line-height: 44px;
				font-size:14px;
                font-weight:bold;
                color:rgba(255,255,255,1);
			}
			.mui-bar>div:nth-child(3){
				position: absolute;
				right: 15px;
				width: 22px;
				height: 100%;
				box-sizing: border-box;
				padding-top: 11px;
			}
			a{
				color:#FFFFFF;
			}
			.mui-bar>div:nth-child(3)>img{
              width: 22px;
			  height: 22px;
			}
			.mui-bar {
background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
box-shadow:0px 5px 8px 0px rgba(254, 95, 99, 0.35);
			}
			
			.leftnews,.rightnews{
				position: relative;
	            width: 100%;
				float: left;
				margin-top: 10px;
				padding: 0  15px;
			}
			.leftnews>div:nth-child(1){
				position: relative;
				float: left;
				width: 44px;
				height: 100%;
				
			}
			
			.leftnews>div:nth-child(1)>img{
				width: 44px;
				height: 44px;
				border-radius: 50%;
				}
			
			.leftnews>div:nth-child(2){
						position: relative;
						float: left;
						width: calc(100% - 98px);
						height: 100%;
						padding-left: 10px;
						box-sizing: border-box;
					
					}
			.leftnews>div:nth-child(2)>div:nth-child(1){
				width: 100%;
				height: 22px;
				line-height: 22px;
				font-size:14px;
                font-weight:500;
                color:#333333;
                line-height:22px;
				text-align: left;
			}
				.leftnews>div:nth-child(2)>div:nth-child(2){
					line-height: 22px;
					font-size:14px;
					font-weight:500;
					color:#333333;
					display: inline-block;
					text-align: left;
					float: left;
					line-height:22px;
					background:rgba(255,255,255,1);
                    border-radius:10px;
					padding: 7px  18px;
					box-sizing: border-box;
				}
			.leftnews>div:nth-child(2)>div:nth-child(3){
				width:100%;
				height: 40px;
				line-height: 22px;
				font-size:12px;
				font-weight:500;
				color:rgba(153,153,153,1);
				line-height:20px;
				padding-left: 80px;
				box-sizing: border-box;
				display: inline-block;
			}	
				.rightnews>div:nth-child(1){
				position: relative;
				float: right;
				width: 44px;
				height: 100%;
				
			}
			
			.rightnews>div:nth-child(1)>img{
				width: 44px;
				height: 44px;
				border-radius: 50%;
				}
			
			.rightnews>div:nth-child(2){
						position: relative;
						float: right;
						height: 100%;
						width: calc(100% - 98px);
						padding-right: 10px;
						box-sizing: border-box;
					  
					}
			.rightnews>div:nth-child(2)>div:nth-child(1){
				width: 100%;
				height: 22px;
				line-height: 22px;
				font-size:11px;
			    font-weight:500;
			    color:#333333;
			    line-height:22px;
				text-align: right;
			}
				.rightnews>div:nth-child(2)>div:nth-child(2){
					line-height: 22px;
					font-size:14px;
					font-weight:500;
					display: inline-block;
					color:#333333;
					float: right;
					line-height:22px;
					background:rgba(255,255,255,1);
			        border-radius:10px;
					padding: 7px  18px;
					box-sizing: border-box;
					text-align: right;
				}
				
				
			.rightnews>div:nth-child(2)>div:nth-child(3){
				display: inline-block;
				width: 100%;
				height: 40px;
				line-height: 22px;
				font-size:12px;
				font-weight:500;
				color:rgba(153,153,153,1);
				line-height:20px;
				text-align: center;
			}	
					footer {
					position: relative;
					width: 100%;
					
					border-top: solid 1px rgba(246,246,246,1);
					overflow: hidden;
					padding: 0px 30px;
					background:rgba(246,246,246,1);
					box-sizing: border-box;
				}
				.qun_foot{
					width: 100%;
					position: relative;
					float: left;
					padding-top: 7px;
					box-sizing: border-box;
				}
				input{
					width: 75%;
					line-height: 40px;
					position: relative;
					float: left;
					border: none;
					background:rgba(255,255,255,1);
					border-radius:35px;
					padding: 0px 19px;
					overflow: hidden;
					box-sizing: border-box;
					font-size: 14px;
				}
				label{
			
					width:131px;
					height:67px;
					background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
					border-radius:34px;
					font-size:16px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(255,255,255,1);
					padding: 7px 15px;
					line-height: 43px;
					box-sizing: border-box;
					margin:15px;
					margin-top: 18px;
				}
				.qun_one{
					width: 100%;
					position: relative;
					float: left;
					padding: 10px  0px;
					box-sizing: border-box;
				}
				.qun_two{
					width: 25%;
					position: relative;
					float: left;
				}
				.qun_two>img{
					width: 30px;
					height: 30px;
				}
				
				.container_foot{
					width: 100%;
					position: fixed;
					bottom: 0;
				}
				.tupiany{
					width: 100%;
					height: 219px;
					position: relative;
					float: left;
					background:rgba(255,255,255,1);
					 display: none;
				}
				.tupiany_one{
					width: 100%;
					position: relative;
					float: left;
					overflow-x: auto;
					white-space: nowrap;
				}
				.mui-input-row>img{
					width: auto;
					height: 176px;
				}
				.mui-checkbox.mui-left input[type=checkbox]{
					left: 95px;
				}
				.mui-checkbox input[type=checkbox]{
					width: 18px;
					height: 18px;
				}
				.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before {
					color: #FE635F;
				}
				.mui-checkbox{
					display: inline-block;
				}
				.tupian_two{
					width: 100%;
					position: relative;
					float: left;
					
				}
				.span_one{
					width: 75%;
					position: relative;
					float: left;
				}
				.span_one>span{
					font-size:15px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(51,51,51,1);
					padding-left: 15px;
				}
				.span_two{
					width:74px;
					height:33px;
					background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
					border-radius:34px;
					float: left;
					line-height: 33px;
					text-align: center;
					margin-top: -5px;
				}
				.span_two>span{
					font-size:16px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(255,255,255,1);
				}
				.liwu{
					width:100%;
					height: 284px;
					position: relative;
					float: left;
					background:rgba(255,255,255,1);
				}
				.liwu_one{
					width: 100%;
					padding-left: 15px;
					box-sizing: border-box;
				}
				.liwu_one>span{
					font-size:14px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(51,51,51,1);
					line-height:48px;
				}
				.liwu_one>img{
					width: 6px;
					height: 9px;
				}
				.liwu_slider{
					width: 20%;
					margin-left: 2.5%;
					position: relative;
					float: left;
					display: inline-block;
					box-sizing: border-box;
					padding-bottom: 2px;
				}
				.slider_one{
					width: 100%;
					height: 40px;
					text-align: center;
				}
				.slider_one>img{
					width: 57px !important;
					height: 40px;
				}
				.slider_two{
					width: 100%;
					text-align: center;
					padding-top: 5px;
					box-sizing: border-box;
				}
				.slider_two>p{
					font-size:12px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(102,102,102,1);
				}
				.slider_three{
					width: 100%;
					text-align: center;
					box-sizing: border-box;
				}
				.slider_three>img{
					width: 11px !important;
					height: 11px;
				}
				.slider_three>span{
					font-size:11px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(255,175,35,1);
					
				}
				.mui-slider .mui-slider-group .mui-slider-item{
					height: 0px;
				}
				.mui-fullscreen {
					top: 40px;
					height: 215px;
				}
				.liwu_three{
					width: 100%;
					position: absolute;
					top: 87%;
				}
				.three_one{
					width: 15%;
					position: relative;
					float: left;
					padding-top: 6px;
					box-sizing: border-box;
					padding-left: 15px;
				}
				.three_one>img{
					width: 11px;
					height: 11px;
					position: relative;
					float: left;
					margin-top: 3px;
				}
				.three_one>span{
					font-size:14px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(249,171,16,1);
					position: relative;
					float: left;
				}
				.three_two{
					width: 15%;
					position: relative;
					float: left;
					padding-top: 6px;
					box-sizing: border-box;
					padding-left: 15px;
				}
				.three_two>span{
					font-size:14px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(102,102,102,1);
				}
				.three_two>img{
					width: 6px;
					height: 9px;
				}
				.three_btn{
					width: 30%;
					height: 33px;
					position: relative;
					float: right;
					background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
					border-radius:34px;
					text-align: center;
					line-height: 33px;
					margin-right: 15px;
				}
				.three_btn>span{
					font-size:16px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(255,255,255,1);
				}
				.liwu_secode{
					width: 100%;
					position: relative;
					float: left;
				}
				.secode_one{
					    width: 15%;
						position: relative;
						float: left;
						padding-left: 15px;
						box-sizing: border-box;
				}
				.secode_one>span{
					font-size:14px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(51,51,51,1);
					line-height:36px;
				}
				.secode_two{
					height:24px;
					background:rgba(237,234,234,1);
					border-radius:30px 25px 25px 20px;
					position: relative;
					float: left;
					line-height: 24px;
					margin-top: 6px;
				}
				.secode_two>img{
					width:24px;
					height:24px;
					border-radius:24px;
				}
				.secode_two>span{
					font-size:14px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(51,51,51,1);
					position: relative;
					float: right;
					padding-right: 15px;
					box-sizing: border-box;
				}
				.secode_three{
					width: 15%;
					position: relative;
					float: right;
					padding-top: 6px;
					box-sizing: border-box;
				}
				.secode_three>span{
					font-size:14px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(51,51,51,1);
				}
				.secode_three>img{
					width: 6px;
					height: 9px;
				}
				.active{
					border: 1px solid red;
				}
				
				.yinpin{
					position: relative;
					float: left;
					width: 100%;
					height: 20px;
				}
				.yinse{
					position: absolute;
					width: 100%;
					height: 20px;
					background: red;
					top: 0px;
				}
			/* 	#mList{
					position: relative;
					float: left;
					width: 100%;
					background: none;
					border: none;
				} */
				
			.leftnews .recordItem{
					position: relative;
					width: 100px;
					float: left;
					background: #9eea6a;
					text-align: left;
					border-radius: 10px;
					padding: 0  15px;
					line-height: 35px;
				    height: 35px;
					box-sizing: border-box;
					}
			.mList{
			height: 44px;
			background: none!important;
		}		
					
			.rightnews	.recordItem{
					position: relative;
					width: 100px;
					line-height: 35px;
					height: 35px;
					float: right;
					background: #9eea6a;
					text-align: right;
					border-radius: 10px;
					padding: 0  15px;
					box-sizing: border-box;
				}
			.liaoimg{
				position: relative;
				width: 100%;
			}	
			a:active{
				color: #FFFFFF;
			}	

				.jianghua{
					width: 100%;
					height: 284px;
					position: relative;
					background:rgba(255,255,255,1);
					text-align: center;
					padding-top: 35px;
					box-sizing: border-box;
				}
				
				.jianghua>p:nth-child(1){
					font-size:15px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(153,153,153,1);
					line-height:20px;
				}
				.jianghua>img{
					width: 90px;
					height: 90px;
				}
				.jianghua>p:nth-child(3){
					font-size:13px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(254,99,96,1);
					line-height:20px;
				}
				.actives{
					background: #fad5d5;
					box-sizing: border-box;
				}
				.leftnewsddd{
					position: relative;
					    width: 100%;
					    float: left;
					    margin-top: 10px;
					    padding: 0 15px;
						box-sizing: border-box;
						padding-left: 69px;
				}
				.lefttis{
					background: #FFFFFF;
					display: inline-block;
					border-radius: 10px;
				}
				
			
				.lefttis span{
					position: relative;
					float: left;
					padding: 0 3px;
					line-height: 40px;
					box-sizing: border-box;
					color: red;
				}
				.lefttis span:nth-child(2){
					color: #000000!important;
				}
				.lefttis span:last-child{
					margin-left: 10px; 
					color: #000000!important;
				}
				
				.lefttis img{
					position: relative;
					float: left;
					width: 40px;
					height: 40px;
					margin-left: 10px;
				}
				.lefttiss{
					position: relative;
					    width: 100%;
					    height: 40px;
					    line-height: 22px;
					    font-size: 12px;
					    font-weight: 500;
					    color: rgba(153,153,153,1);
					    line-height: 20px;
						padding-left: 80px;
						box-sizing: border-box;
				}
				
				.history{
					position: relative;
					padding: 2px  5px;
					box-sizing: border-box;
					width: 100%;
					color: black;
					text-align: center;
					font-size: 14px;
					background: #DDDDDD;
					line-height: 30px;
				}
		</style>
	</head>

	<body contextmenu="return false;"  id="body" >
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<div id="qunname">这是群聊名称</div>
			<div><img  class="navigation" src="../image/daohang.png" /></div>
		</header>
		
		<div class="mui-content" id="mui-content">
			<div id='msg-list'>
					<div class="history recordItem">历史纪录</div>
				
			
			
	
			</div>
		</div>
		
		
		<div class="container_foot">
			<footer>
				<div class="qun_foot">
					<input id="texts" rows="" cols="" class="qun_text" />
						
					<label id="fasongwenzhi">
						发送
					</label>
				</div>
				<div class="qun_one">
					<div class="qun_two">
						<img   state="0" src="../image/weixuanyuyin.png" >
					</div>
					<div  class="qun_two">
						<img state="1"  src="../image/weixuanxiangc.png" >
					</div>
					<div class="qun_two">
						<img  state="2" state="2" src="../image/weixuanxiangj.png" >
					</div>
					<div  class="qun_two">
						<img state="3" src="../image/weixuanliwu.png" >
					</div>
				</div>
			</footer>
			
			
			<!-- 讲话 -->
			<div class="jianghua" style="display: none;">
				<div id="time"></div>
				<p>按住说话</p >
				<img src="../image/lyin.png"  id="btnStartRecord" alt="">
				<p>对讲</p >
			</div>
			<!-- 图片 -->
			<div class="tupiany">
				
			</div>
			<!-- 礼物 -->
			<div class="liwu"  style="display: none;">
				<div class="liwu_one" >
					<span>点此处选中赠送对象</span>
					<img src="../image/youjiantous.png" alt="">
				</div>
				<div class="liwu_secode"  style="display: none;">
					<div class="secode_one">
						<span>送给:</span>
					</div>
					<div class="secode_two">
						<img src="../image/touxiang.png" alt="">
						<span nameid=""></span>
					</div>
					<div class="secode_three">
						<span>换人</span>
						<img src="../image/youjiantous.png" alt="">
					</div>
				</div>
				<div class="mui-slider mui-fullscreen">
					<div class="mui-slider-group" id="myliwu">
						
					</div>
					<div class="mui-slider-indicator" id="liwudiandian">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>
				<div class="liwu_three">
					<div class="three_one">
						<img src="../image/jingbi.png" alt="">
						<span id="jiage">0</span>
					</div>
					<div class="three_two">
						<span>充值</span>
						<img src="../image/youjiantous.png" alt="">
					</div>
					<div class="three_btn">
						<span>立即赠送</span>
					</div>
				</div>
			</div>
		</div>
			<div class="bg" style="display:none">
			<div class="bgimg"><img src="../image/drug.png" style=""></div>
		</div>
		
	<!-- 	<div id='sound-alert' class="rprogress">
			<div class="rschedule"></div>
			<div class="r-sigh">!</div>
			<div id="audio_tips" class="rsalert">手指上滑，取消发送</div>
		</div> -->
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-2.1.4.min.js"></script>
		<script src="qunliaosub4.js"></script>
		<script src="../js/upyinandimg.js"></script>
		<script src="../js/imgenlarged.js"></script>
	<!-- 	<script src="../js/mui.imageViewer.js"></script>
		<script src="../js/arttmpl.js"></script> -->
		<script type="text/javascript" charset="utf-8">
			
			
	
	

	
mui.plusReady(function(){   
	
	//监听 从选人页面返回来之后  进行 的操作
	window.addEventListener('cusRefresh',function(event){
			 var  name=event.detail.backname;
				var  backsrc=event.detail.backsrc;
				 var backid= event.detail.backid
		        $(".liwu_one").css("display","none")
				$(".liwu_secode").css("display","block");
		        $(".secode_two").children("img").attr("src",backsrc);
				$(".secode_two").children("span").attr("nameid",backid);	
				$(".secode_two").children("span").text(name);
	});  
	
			window.addEventListener("refreshdwwww", function (e) {
			location.reload()
			});
	
	
	mui.init({
			 gestureConfig:{
			   tap: true, //默认为true
			   doubletap: true, //默认为false
			   longtap: true, //默认为false
			   swipe: true, //默认为true
			   drag: true, //默认为true
			   hold:false,//默认为false，不监听
			   release:false//默认为false，不监听
			  },
			  beforeback: function() {　　　　
			  	var list = plus.webview.currentWebview().opener();　　　　
			  		  //refresh是A页面自定义事件
			  	mui.fire(list, 'newrest');
			  		 //返回true,继续页面关闭逻辑
			  	return true;
			  	}
			  
	});
	var url = plus.storage.getItem('url');
	var user = plus.storage.getItem('user');
	user = JSON.parse(user);
	var web = plus.webview.currentWebview();
	var qunid = web.qunid;
	var create_time = 0;
	var page = 1;
	var liwuid = 0;
	var ws = '';
	// mui.alert(qunid);
	//获取数据
	mui.post(url+'/juyou/Grouping/getjilu',{token:user.token,qunid:qunid,page:1},function(res){
		if(res.code==200){
			$("#qunname").text(res.data.qun.name);
			create_time = res.data.create_time;
			//加载聊天记录
			mui.each(res.data.data,function(i,v){
				if(v.type==1){
					type1(v,user.id);
					setTimeout(function(){
						$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
					},500)		
				}else if(v.type==3){
					type3(v,user.id)
					setTimeout(function(){
						$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
					},500)		
				}else if(v.type==2){
					type2(v,user.id)
					setTimeout(function(){
						$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
					},500)		
				}else if(v.type==4){
					type4(v,user.id);
					setTimeout(function(){
						$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
					},500)
				}
			})
			//渲染礼物
			jiazailiwu(res.data.liwu);
			
			
			//及时通信
			// mui.alert(url);
			ws = new WebSocket("ws://58.82.250.98:2348");
			//及时通信连接
			ws.open = function () {
			  //       console.log('连接上了');
					// mui.toast('连接上了');
			    }
				//及时通信获取消息
			    ws.onmessage = function (res) {
			       var data = res.data;
				   // mui.toast(data)
				   data = JSON.parse(data);
				   if(data.client_id){
					   mui.post(url+'/juyou/Grouping/bingrops',{token:user.token,client_id:data.client_id,qunid:qunid},function(res){
						   // mui.toast(res.msg);
						   console.log('绑定成功');
					   })
				   }else if(data.forms){
					   var strs = '';
					   if(data.type==1){
						   type1(data,user.id);
						   setTimeout(function(){
						   	$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
						   },500)
					   }else if(data.type==3){
						   type3(data,user.id);
						   setTimeout(function(){
						   	$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
						   },500)
					   }else if(data.type==2){
						   type2(data,user.id);
						   setTimeout(function(){
						   	$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
						   },500)
					   }else if(data.type==4){
						   type4(data,user.id);
						   setTimeout(function(){
						   	$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
						   },500)
					   }
					   
				   }
			    }
				//及时通信关闭
			    ws.onclose = function () {
			  //       console.log('关闭连接')
					// mui.toast('关闭连接');
			    }
				mui('#msg-list').on('tap','.history',function(){
					if(page==0){
						mui.toast('没有更多了!!');
						return;
					}
					plus.nativeUI.showWaiting();
					mui.post(url+'/juyou/Grouping/getliaotianlist',{token:user.token,qunid:qunid,create_time:create_time},function(res){
						plus.nativeUI.closeWaiting();
						// mui.toast(res.msg);
						if(res.code==200){
							if(res.data.data.length<10){
								page  = 0;
							}
							create_time = res.data.create_time;
							mui.each(res.data.data,function(i,v){
								if(v.type==1){
									uptype1(v,user.id);
								}else if(v.type==2){
									uptype2(v,user.id);
								}else if(v.type==3){
									uptype3(v,user.id);
								}else if(v.type==4){
									uptype4(v,user.id);
								}
							})
							
						}else{
							mui.toast(res.msg);
						}
					})
				})
		}else{
			mui.toast(res.msg);
		}
	})




		//发送文字
	mui('.qun_foot').on('tap','#fasongwenzhi',function(res){
		// mui.alert('haha')
		var str = $(this).prev().val();
		if(!str){
			mui.toast('请输入发送的内容!');
			return;
		}
		var data = {
			qun:qunid,
			texts:str,
			token:user.token,
		}
		mui.post(url+'/juyou/Grouping/sentexttoqun',data,function(res){
			if(res.code==200){
			$("#texts").blur();
			}else{
				mui.toast(res.msg);
			}
		})
	})
	
	//发送语音
	$("#btnStartRecord").bind('touchstart',function(){
	
	  	
		myluyin(url+'/juyou/index/upimg',function(shijian){
			$("#time").text(shijian);
		},function(datas){
			$("#time").text('');
			
				 var btnArray = ['确定', '取消']; 
			    // Phone = "025-88888888"; 
			    mui.confirm('是否发送语音？', '提示', btnArray, function(e) { 
			        if (e.index == 0) { 
			           plus.nativeUI.showWaiting();
			           var data={
			           	qun:qunid,
			           	token:user.token,
			           	yuying:datas.id,
			           	yuyin_time:datas.yuyin_time
			           }
			           plus.nativeUI.showWaiting();
			           mui.post(url+'/juyou/Grouping/sendluyintoqun',data,function(res){
			           	plus.nativeUI.closeWaiting();
							$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
			           	if(res.code==200){
			           	
			           	}else{
			           		mui.toast(res.msg);
			           	}
			           })
					   
			        }  
			    })
			})
			
		
		})
		
		//这个是点击语音进行播放
		$(document).on("tap",".mList  .recordItem",function(){
			            var oName = $(this).attr("src");
			            var path = "";
			            var player = plus.audio.createPlayer(oName);
				var num =player.getDuration();//获取音频总长度number  
			setTimeout(function(){//延时获取，否则可能没有返回长度  
			    var num = player.getDuration();  
			},100)  
			            player.play(function(){
			                console.log('play ended');
			            },function(e){
			                console.log("message："+e.message);
			            });
			  });
		
		
		
		//点击聊天下面的四个按钮
			//点击语音聊天按钮
		$(".qun_one").on("tap",".qun_two  img",function(){
		
				var  index=$(this).attr("state")
				if(index==0){
					$(".jianghua").css("display","block");
					$(".liwu").css("display","none");
					  $(".liwu_one").css("display","block")
					$(".liwu_secode").css("display","none")
					$("#msg-list").css("padding-bottom","350px");
					$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
					//点击照片
				}else  if(index==1){
					galleryImages(url+'/juyou/index/upimgs', function(res){
						var data ={
							qun:qunid,
							tupians:res.id,
							token:user.token,
						}
						// mui.alert(res.id);
						plus.nativeUI.showWaiting();
						mui.post(url+'/juyou/Grouping/sendimgtoqun',data,function(res){
							plus.nativeUI.closeWaiting();
							if(res.code==200){
								setTimeout(function(){
									$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
								},500)
								
							}else{
								mui.toast(res.msg);
							}
						})
						
					})
					// 点击拍照
				}else if(index==2){
					getImages(url+'/juyou/index/upimgs',function(res){
						
						// $("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
						var data ={
							qun:qunid,
							tupians:res.id,
							token:user.token,
						}
						// mui.alert(res.id);
						plus.nativeUI.showWaiting();
						mui.post(url+'/juyou/Grouping/sendimgtoqun',data,function(res){
							plus.nativeUI.closeWaiting();
							if(res.code==200){
								$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
							}else{
								mui.toast(res.msg);
							}
						})
					})
					
					//点击礼物
				}else  if(index==3){
					$(".liwu").css("display","block");
					$(".jianghua").css("display","none");
				var backid=$(".secode_two").children("span").attr("nameid");	
					if(backid){
						$(".liwu_one").css("display","none")
						$(".liwu_secode").css("display","block");
					}
					$("#msg-list").css("padding-bottom","350px");		
					$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
				}
			})
		
		//进入群资料信息
		mui(".mui-bar").on("tap",".navigation",function(){
		   mui.openWindow({
			   	url:'qunziliaosub4.html',
			   id:"qunziliaosub4.html",
			   extras: {
			   //参数
			   qunid:qunid
			   },
			   show: {
			   	autoShow: true, //页面loaded事件发生后自动显示，默认为true
			   	aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
			   	duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
			   },
			   waiting: {
			   	autoShow: true, //自动显示等待框，默认为true
			   	title: '正在加载...', //等待对话框上显示的提示内容
			   }
			   
		   })
		})
		
		//点击选择赠送对象
		mui(document).on("tap",".liwu_one",function(){
				mui.openWindow({
		         url:"choose.html",		
				 id:"choose.html",
				 extras: {
				 	qunid:qunid,
				 },
				}) 
		});
			//换人
		mui(document).on("tap",".secode_three",function(){
				mui.openWindow({
		         url:"choose.html",		
				 id:"choose.html",	
					 extras: {
					 	qunid:qunid,
					 },
				}) 
		});
		
		
		//点击选择带礼物 
		mui(document).on("tap",".liwu_slider",function(){
			$(this).addClass("actives");
			$(this).siblings().removeClass("actives");
			$(this).parent().closest(".mui-slider-item").siblings().children(".liwu_slider").removeClass("actives")
			liwuid = $(this).attr('data-id');
			var myvalue = $(this).attr('data-icon');
			$("#jiage").text(myvalue);
			// mui.alert(liwuid);
			// mui.alert(myvalue);
		});
		
		
		//充值
		mui(document).on("tap",".three_two",function(){
				mui.openWindow({
		         url:"../sub5/huchongzhigold.html",		
				 id:"huchongzhigold.html",		
				}) 
		});
		
		    //立即赠送礼物
			mui(document).on("tap",".three_btn",function(){
				// var liwuid = 
				var userid = $(".secode_two").children("span").attr("nameid");
				if(!liwuid){
					mui.toast('请选择礼物');
					return;
				}
				if(!userid){
					mui.toast('请选择赠送的人!!');
					return
				}
				var data={
					qun:qunid,
					token:user.token,
					liwu:liwuid,
					tos:userid
				}
				plus.nativeUI.showWaiting();
				mui.post(url+'/juyou/Grouping/songli',data,function(res){
					// mui.toast(res.msg);
					plus.nativeUI.closeWaiting();
				
					if(res.code==200){
						setTimeout(function(){
							$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
						},500)
					}else if(res.code==209){
						mui.toast(res.msg);
						setTimeout(function() {
							mui.openWindow({
							 url:"../sub5/huchongzhigold.html",		
							 id:"huchongzhigold.html",		
							}) 
						}, 1500);
					}else{
						mui.toast(res.msg);
					}
				})
			});
		
		
		            //页面视觉化 效果初始化
					// var msghei=document.getElementById("mui-content");
		   //          var  height= $(document).height();
					$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
					
				
					
					//点击空白隐藏 下面的东西
					mui(document).on("tap","#msg-list",function(e){
							var _con=$(".recordItem")
						if(!_con.is(e.target) && _con.has(e.target).length === 0)	{
							$(".liwu").css("display","none");
							$(".jianghua").css("display","none");
								$("#msg-list").css("padding-bottom","60px");		
							$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
							$(".liwu_one").css("display","none")
							$(".liwu_secode").css("display","block");
							$("input").blur();
						}
					})
					
					//输入框 获取焦点的时候
					$(document).on("focus",".qun_text",function(){
						$(".liwu").css("display","none");
						$(".jianghua").css("display","none");
							$("#msg-list").css("padding-bottom","350px");		
					$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
						
					})
					//失去焦点
					$(document).on("blur",".qun_text",function(){
						$(".liwu").css("display","none");
						$(".jianghua").css("display","none");
							$("#msg-list").css("padding-bottom","60px");		
						   $("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
						   $(".liwu_one").css("display","block")
							$(".liwu_secode").css("display","none")
					})
				
					//键盘弹出或者收起事件处理	
					const innerHeight = window.innerHeight;
					  window.addEventListener('resize', () => {
						const newInnerHeight = window.innerHeight;
						if (innerHeight > newInnerHeight) {
						  // 键盘弹出事件处理
						} else {
						  // 键盘收起事件处理
						  $("input").blur();
						}
					  });
					  
					  
			$("#btnStartRecord").bind('touchend',function(){
			    endRecord("time");
				var text="按住说话"
			});    		  
				
					  
					  	
				//聊天发送礼物
			 function sendgift(giftid,sendname) {
								  plus.nativeUI.showWaiting();
								  mui.ajax('发送礼物地址',{
										data:{
											// file:imgData
										},
										dataType:'json',//服务器返回json格式数据
										type:'post',//HTTP请求类型
										timeout:10000,//超时时间设置为10秒；
										success:function(data){
											console.log("上传数据")
											plus.nativeUI.closeWaiting()						  
										},
										error:function(data){
											mui.alert(data+"1")
										}
									});
			                  }
		
		
		
	});
	
			
		
		
        
			
			
		</script>
	</body>

</html>
